<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/index.css" />
</head>
<body>
    <div class="wrapper">
        <div class="animated-box">
            <a href="">点击订火车票机票</a>
        </div>

        <div class=" header">
            <div class="title">
                <h1>旅游百科</h1>
                <ul class="others">
                    <li>了解更多</li>
                    
                    <li>其它</li>

                </ul>
            </div>
    
        </div>

        <div class="box cities">
            <div class="city beijin">
                <div class="img">
                        <img src="../imgs/beijin_1.webp" alt="">
                        <p>天坛</p>
                </div>
                <div class="img">
                        <img src="../imgs/beijin_2.webp" alt="">
                        <p>故宫</p>
                </div>
                <div class="img">
                        <img src="../imgs/beijin_3.webp" alt="">
                        <p>鸟巢</p>
                </div>
                <div class="cityname">
                    <p>
                        北
                    </p>
                    <p>
                        京
                    </p>
                </div>
                <div class="introduce">
                    北京作为中国的首都......
                </div>
            </div>
            <div class="city hubei">
                    <div class="img">
                            <img src="../imgs/hubei1.webp" alt="">
                            <p>黄鹤楼</p>
                    </div>
                    <div class="img">
                            <img src="../imgs/hubei2.webp" alt="">
                            <p>武当山</p>
                    </div>
                    <div class="img">
                            <img src="../imgs/hubei3.webp" alt="">
                            <p>神农架</p>
                    </div>
                    <div class="cityname">
                        <p>
                            湖
                        </p>
                        <p>
                                北
                        </p>
                    </div>
                    <div class="introduce">
                            湖北作为中国的......
                        </div>
            </div>
            <div class="city qindao">
                    <div class="img">
                            <img src="../imgs/qingdao1.webp" alt="">
                            <p>五四广场</p>
                    </div>
                    <div class="img">
                            <img src="../imgs/qingdao2.webp" alt="">
                            <p>捞山</p>
                    </div>
                    <div class="img">
                            <img src="../imgs/qingdao3.webp" alt="">
                            <p>海滩</p>
                    </div>
                    <div class="cityname">
                        <p>
                            青
                        </p>
                        <p>
                                岛
                        </p>
                    </div>
                    <div class="introduce">
                            青岛作为中国的......
                        </div>
            </div>

        </div>

       

        <div class="box leftguide">
            <div class="font">中</div>
            <div class="font">华</div>
            <div class="font">美</div>
            <div class="font">景</div>


        </div>
    </div>

    <footer>
        <a href="" >联系我们 知道更多...</a>
    </footer>
    <h1 class="flashing">广告位联系我</h1>
</body>
</html>